<template>
  <div
    id="SafetyChart"
    style="width: 100%; height: 400px; margin-top: 10px"
  ></div>
</template>

<script>
import echarts from "echarts";
import resize from "./mixins/resize";
import request from "@/utils/request";
export default {
  name: "SafetyChart",
  mixins: [resize],
  data() {
    return {
      chart: null,
      data1: [],
      data2: [],
      list: [],
    };
  },
  mounted() {
    // this.initChart();
  },
  methods: {
    initChart() {
      request({
        url: `/api/getway/Xy_hse_yhpctj/findHiddenNumber?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        let option = {
          title: {
            text: "隐患排查统计",
            textStyle: {
              fontSize: 16,
              fontStyle: "normal",
              fontWeight: "700",
            },
          },
          grid: {
            x: 80,
            y: 50,
            x2: 50,
            y2: 60,
            borderWidth: 0,
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          color: ["#3398DB"],
          // toolbox: {
          //   feature: {
          //     dataView: { show: true, readOnly: false },
          //     magicType: { show: true, type: ["line", "bar"] },
          //     restore: { show: true },
          //     saveAsImage: { show: true },
          //   },
          // },
          legend: {
            data: ["隐患数量", "整改率"],
          },
          xAxis: [
            {
              type: "category",
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ],
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "隐患数量",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "{value} 个",
              },
              axisLine: {
                show: false, //是否显示y轴
                lineStyle: {
                  // color: '#000', // y坐标轴的轴线颜色
                  // width: 1, //这里是坐标轴的宽度,可以去掉
                },
              },
              axisTick: {
                show: false, //是否显示刻度
              },
            },
            {
              type: "value",
              name: "整改数量（%）",
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: "{value} %",
              },
            },
          ],
          series: [
            {
              name: "隐患数量",
              type: "bar",
              barWidth: 30, //柱图宽度
              data: this.data1,
            },
            {
              name: "整改率",
              type: "line",
              yAxisIndex: 1,
              data: this.data2,
            },
          ],
        };
        this.list = res.data.list;
        this.list.forEach((item) => {
          this.data1.push(item.hiddenNumber);
          this.data2.push(item.rectificationRate);
        });
        this.chart = echarts.init(document.getElementById("SafetyChart"));
        this.chart.setOption(option);
        window.onresize = this.chart.resize();
      });
    },
  },
};
</script>
